$(function(){
    $.get('',function(widgets){
        if(widgets){
            var html = '<ul class="module_list" id="J_widgetList">';

            for(var i in widgets){
                var row = widgets[i];
                html += '<li>\
                    <div class="item">\
                    <a href="">\
                        <img src="'+row['config']['icon']+'" alt="'+row.config.name+'"/>\
                        <div class="info">\
                            <div class="line">模块：'+row.config.name+'</div>\
                            <div class="line">作者：'+row.config.author+'</div>\
                            <div class="line">版本：'+row.config.version+'</div>\
                            <div class="line">发布时间：'+row.config.release_date+'</div>\
                        </div>\
                    </a>\
                    </div>\
                </li><div style="height: 0;clear: both;"></div>';
                window.demos[i] = {};
            }
            html += '</ul>';
            $('#scroller1 ul').remove();
            $('#scroller1').append(html);

            setTimeout(function(){
                new iScroll('S_widgets');
                $(window).trigger('resize');
            }, 200);
        }
    });
   /* var html = '<ul id="J_widgetList">';
    var widgets = [];
    for(var i in widgets){
        html += '<li><a href="' + i +'"><img src="./assets/img/' + widgets[i]['icon'] + '" alt="' + widgets[i]['name'] + '">' +
            '<span class="title">' + widgets[i]['name'] + '</span><span class="desc">' + widgets[i]['description'] + '</span></a></li>';
    }
    html += '</ul>';

    $('#scroller1 ul').remove();
    $('#scroller1').append(html);
    // $('.pages').height($('#J_widgetList').height());

    setTimeout(function(){
        new iScroll('S_widgets');
        $(window).trigger('resize');
    }, 200);*/
});


$(function(){
    var widgetSection = $('#S_widgets').show(),
        demoSection = $('#S_demos');

    // $('.pages').css('overflow', 'hidden');

    demoSection.css('-webkit-transform', 'translateX(100%)');
    $('.__page__').css('-webkit-transition', 'all .3s ease-in-out');

    $('#S_widgets a').click(function(e){
        var widgetName = $(this).attr('href');

        location.hash = widgetName;
        e.preventDefault();
    });

    $('.btn_back').click(function(){
        widgetSection.css('-webkit-transform', 'translateX(0)');
        demoSection.css('-webkit-transform', 'translateX(100%)');
        location.hash = '';
    });

    var updateDemoSection = function(widget){
        var demolist = demos[widget],
            html = '<ul id="J_demoList">';

        demolist.forEach(function(item, index){
            html += '<li><a href="./widget/' + item.file + '">' + item.title + '</a></li>';
        });

        html += '</ul>';

        $('#scroller2 ul').remove();
        $('#scroller2').append(html);
        $('#scroller2 h3 span').html(widget + ' Demos');

        new iScroll('S_demos');
    }

    var updatePage = function(){
        var widgetName = location.hash.replace('#', '');

        if(widgetName === '' || !demos[widgetName]){
            widgetSection.css('-webkit-transform', 'translateX(0)');
            demoSection.css('-webkit-transform', 'translateX(100%)');
        }else{
            updateDemoSection(widgetName);
            widgetSection.css('-webkit-transform', 'translateX(-100%)');
            demoSection.show();
            window.scrollTo(0, 0);
            setTimeout(function(){
                demoSection.css('-webkit-transform', 'translateX(0)');
            }, 0);
        }
    }

    window.onhashchange = function(e){
        updatePage();
    }

    updatePage();
});